<!DOCTYPE html>
<html lang="en">
<head>
<title>How can I make links accessible?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How can I make links accessible?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_7CD8A8B3-B5B7-4A33-86C2-D253A098A9B4" class="text-block-content">
    <p>Assistive technology users use link lists to navigate content. This means they cannot rely on context to tell them what a link does. Each link needs to be uniquely descriptive of what it does. The best place to uniquely identify a link is in the link text. Good examples are "View Assignment 34," "Visit Entomological Society of America," etc. </p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="use-unique-and-descriptive-link-text">
    <h2 class="step-title screensteps-heading">Use unique and descriptive link text.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/310/519/original/73890223-5fc2-4cb1-9997-46d8240d00cb.png" alt="" height="327" width="360">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_ACB65DDA-6588-4D1F-8319-8A7C714CEF81" class="text-block-content">
    <p>Above is an image displaying two tables.</p>
<ol>
<li>In lists where each item has several links associated with it, the temptation would be to create a table like the first example shown above. It contains three rows, each containing an Item where you can click a link to <strong>Vote</strong> for the item or <strong>Delete</strong> it. Because each item only has <strong>Vote</strong> and <strong>Delete</strong> for the links, someone using assistive technology, such as a screen reader, might not be able to tell for which item they're voting.</li>
<li>The second example shown would be better, if a bit verbose. Each item's links contain all the information you need to know to select them: <strong>Vote on Item 1</strong>, <strong>Delete Item 1</strong>, <strong>Vote on Item 2</strong>, <strong>Delete Item 2</strong>, etc.</li>
</ol>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="add-alternative-text-for-image-links">
    <h2 class="step-title screensteps-heading">Add alternative text for image links.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_2717EFE2-F7FC-4E07-B367-960D5AD3C8B3" class="text-block-content">
    <p>For every HTML web link embedded into the Rich Text Editor that contains only an image and no textual content, concise and descriptive alternative text is mandatory. The alternative text should describe the purpose of the link (e.g., the "destination" that the user will be taken to upon activation of the link). For more information on adding alternative text to an image, see <a href="content.hlp?docId=howcanimakeimagesmoreaccessible">How can I make images more accessible?</a></p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="identify-file-types-in-links-to-downloadable-files">
    <h2 class="step-title screensteps-heading">Identify file types in links to downloadable files.</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_8E929360-F4D3-4983-A22B-998651B5E356" class="text-block-content">
    <p>Assistive technology users will benefit from knowing what type of file it is they are downloading. When you link to a file in the Rich Text Editor, include the information in the link text.</p>
<p>Example: essay (MS Word), report (PDF), presentation (MS PowerPoint)</p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
